<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>print_SplitElement_01</title>
	<style>
		@page {
			margin-top: 0;
			margin-bottom: 0;
			margin-left: 0;
			margin-right: 0;
		}
		@media print{
			body {
				background: #fff;
				margin-top: 0;
				margin-bottom: 0;
				margin-left: 0;
				margin-right: 0;
			}
			.notShow {
				display: none;
			}
		}
	</style>
	<script type="text/javascript" src="../third-party/jquery-1.10.2.min.js"></script>
</head>
<body>

<iframe id="ifr_fortest" style="width:0;height:0;"><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><title>ifr_fortest</title></head><body></body></html></iframe><!-- 用来测量单行元素的高度, 后觉得复杂而放弃使用 -->

<input class="notShow" type="button" id="printBtn" value="打印"/>
<hr class="notShow">
<p id="p01" style="width:680px;">
床前明月光,疑是地上霜;举头望明月,低头思故乡.
</p>
<p id="p02" style="width:680px;" _split="yes">
2018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:342018-01-0821:29:34
</p>

<script type="text/javascript">
	$(function(){
		
		/*var ifr_fortest = $('#ifr_fortest');
		var body_fortest = ifr_fortest[0].contentWindow.document.body;
		var b1 = $(body_fortest);*/ /* 原计划用来测量单行元素的高度 */
		
		$('#printBtn').on('click', function(){
		
			var _parentBody = $('body');
			var arrP = _parentBody.find('p');
			
		
			var $ifr_00 = $('#ifr_00');
			if($ifr_00[0]){
				$ifr_00.remove();
			}
			var tplIfr = '<iframe id="ifr_00" style="width:0;height:0;"></iframe>';
			$('body').append( tplIfr );
			setTimeout(function(){
				$ifr_00 = $('#ifr_00');
				if($ifr_00[0]){
					var _ifr = $ifr_00[0];
					var _doc = _ifr.contentWindow.document;
					
					_doc.open();
					_doc.write('<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><title>wxg</title><style>@page {margin-top: 0;margin-bottom: 0;margin-left: 0;margin-right: 0;}@media print{body {background: #fff;margin-top: 0;margin-bottom: 0;margin-left: 0;margin-right: 0;}}</style></head><body>');
					
					
					$.each(arrP, function(i,n){
						// console.log( $(n) );
						// console.log( $(n)[0].outerHTML );
						console.log( i, $(n).height() ); // 测量行高
						if( $(n).attr('_split') == 'yes' ){
							var content = $(n).html();
							var outerHtml1 = $(n)[0].outerHTML;
							var outerHtml2 = $(n)[0].outerHTML;
							
							var _oh1 = $(outerHtml1, _doc);
							_oh1.css({overflow:"hidden",height:"63px"});
							
							var _oh2 = $(outerHtml2, _doc);
							_oh2.css({overflow:"hidden",height:"84px"});
							_oh2.empty();
							$('<div style="margin:0;padding:0;border:0"></div>', _doc)
								.html(content).css({"margin-top":"-63px"})
								.appendTo(_oh2);
							
							// 使用"overflow:hidden",加上固定高度(三行的高度),可以只显示固定的这几行(三行)
							console.log( _oh1[0].outerHTML );
							_doc.write( _oh1[0].outerHTML );
							
							// 但是,使用上面的方法不能显示余下的几行
							console.log( _oh2[0].outerHTML );
							_doc.write( _oh2[0].outerHTML );
						}else{
							_doc.write( $(n)[0].outerHTML );
						}
					});
					
					_doc.write( '<script type="text\/javascript">window.onload=function(){window.print();};<\/script>' );
					_doc.write('</body></html>');
					_doc.close();
				}
			});
		});
	});
</script>

</body>
</html>